<template>
  <div>
    <a-modal
      title="添加用户"
      :visible="isAddUserModel"
      @cancel="cancelAddUser"
      @ok="addUser"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="用户名">
          <a-input
            v-decorator="[
              'username',
              {
                rules: [
                  {
                    pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
                    message: '请正确输入你的姓名',
                  },
                  { required: true, message: '请输入用户名' },
                ],
              },
            ]"
            placeholder="请输入用户名"
          />
        </a-form-item>
        <a-form-item label="密码">
          <a-input
            v-decorator="[
              'password',
              {
                rules: [
                  { required: true, message: '请输入密码' },
                  { min: 3, max: 6, message: '密码最小3位最大6位' },
                ],
              },
            ]"
            placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input
            v-decorator="[
              'email',
              {
                rules: [
                  {
                    pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    message: '请正确输入你的邮箱',
                  },
                  { required: true, message: '请输入邮箱' },
                ],
              },
            ]"
            placeholder="请输入邮箱"
          />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input
            v-decorator="[
              'mobile',
              {
                rules: [
                  {
                    pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                    message: '请正确输入你的手机号',
                  },
                  { required: true, message: '请输入手机号' },
                ],
              },
            ]"
            placeholder="请输入手机号"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: ["isAddUserModel"],
  data() {
    return {
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
    };
  },
  methods: {
    cancelAddUser() {
      this.$emit("cancelAddUser");
    },
    addUser() {
      this.form.validateFields(async (err) => {
        if (!err) {
          const { data: res } = await this.$http.post(
            "users",
            this.form.getFieldsValue()
          );
          if (res.meta.status !== 201) {
            return this.$message.info(res.meta.msg);
          }
          this.$message.success(res.meta.msg);
          this.$parent.loadData();
          this.form.resetFields();
          this.$emit("cancelAddUser");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
